<template>
  <div className="pieChart">
    <!--  柱形图  -->
    <div id="barChart" ref="barChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
// import { querySalePriceCompTable } from '@/api/homePageNew/salesman'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  props: {
    dataSheets: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      product: [this.$t('market.achmentRate'), this.$t('market.theSameRate')], // '上月交期达成率', '当月交期达成率'
      allPrice: []
    }
  },
  watch: {
    dataSheets(val) {
      val.forEach(item => {
        this.allPrice.push([
          item.userName,
          item.achievementRate, item.thisAchievementRate
        ])
      })
      this.drawLine()
    }
  },
  methods: {
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const barChart = echarts.init(document.getElementById('barChart'))
      // 绘制图表
      barChart.setOption({
        title: {
          text: this.$t('market.nearlyTwoMonths'), // '近两月采购员交期达成率%',
          left: 'center'
        },
        legend: { // ['上月交期达成率', '当月交期达成率'] 显示位置
          bottom: '2%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // label: {
        //   show: true // 是否显示标签
        // },
        dataset: {
          source: [
            ['product', ...this.product],
            ...this.allPrice
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {
          name: '%', // '达成率(%)',
          type: 'value'
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            }
          }, {
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
#barChart {
  width: 100%;
  height: 400px;
}
</style>
